<template>
  <div class="common-layout">
    <el-container>
      <el-header style=" width: 390px;height: 100px;;display: flex;flex-direction: row;">
        <div style="height: 50px;margin-top: 30px;margin-left: -20px;">
            <el-icon style="font-size: 30px; width: 30px;height: 50px;"><ArrowLeftBold @click = "return1" /></el-icon>
        </div>
        <div style="height: 45px;margin-top: 30px;">
            <img style="width: 45px;height: 45px;" src="./图片/屏幕截图 2024-06-19 142919.png">
        </div>
        <div style=" margin-top:27px;margin-left: 10px;width: 170px;">
            <p style="width: 170px;">{{b.user.nickname}}</p>
        </div>
        <div style=" margin-top: 35px;height: 40px;width: 70px;margin-left: 15px;">
            <el-button style="width: 70px;height: 40px;" type="primary" round plain>关注</el-button>
        </div>
        <div style="height: 50px;width: 40px;margin-top: 38px;margin-left: 10px;">
            <el-icon style="font-size: 35px;" @click = "bulletBox"><Edit /></el-icon>
            <el-dialog v-model="dialogVisible" title="编辑提示" width="300" height="200" align-center>
                <div style="display: flex;flex-direction: row;">
                    <div @click="delete1" style="margin-left: 35px;"><p style="font-size: 17px;color:#409EFF;">删除改文章</p></div>
                    <div @click = "edit(router.currentRoute.value.query.myid)" style="margin-left: 45px;"><p style="font-size: 17px;color:#409EFF;">编辑改文章</p></div>
                </div>
            </el-dialog>
        </div>
      </el-header>
      <el-main style="margin: 0%;padding: 0px;">
            <el-image style="width: 390px;height: 400px;" :src="b.imgUrls"/>
        <div style="width: 390px;">
            <p style="font-family: 宋体;font-size: 25px;font-weight: bold;">{{b.title}}</p>
            <p style="font-family: 楷体;font-size: 20px;">内容：{{b.content}}</p>
        </div>
      </el-main>
    </el-container>
  </div>
  
  <RouterView />
</template>

<style scoped>

</style>

<script setup>
import {ArrowLeftBold,Edit} from "@element-plus/icons-vue"
import { ref,onMounted} from 'vue';

const b = ref({
   user:[],
   title:"",
   imgUrls:"",
   content:""
})
import { useRouter } from 'vue-router';
const router = useRouter();
const query1 = ()=>{
    fetch(`http://localhost:3000/articles/${router.currentRoute.value.query.myid}?_embed=user`,{
        method:'get'
    }).then(response=>response.json()).then((data1)=>{
        b.value = data1
    })
}

onMounted(()=>{
    query1()
    query2()
    query3()
})
// 返回
const router1 = useRouter();
const return1 = () => {
  // 如果是内部路由跳转 (Vue Router)
  router1.push({path:'/'})

};
 

const dialogVisible = ref(false)
const bulletBox = ()=>{
    dialogVisible.value = true
}
// 删除
const router2 = useRouter();
const return2 = () => {
  // 如果是内部路由跳转 (Vue Router)
  router2.push({path:'/'})

};
const delete1 =(id)=>{
    fetch("http://localhost:3000/articles/"+router.currentRoute.value.query.myid,{
        method:"delete"
    }).then(response=>response.json()).then((data)=>{
                return2()
            
    })
}

// 编辑
const router3 = useRouter();
const edit = (id)=>{
    router3.push({path:'/bianji',query:{myid:id}})
}

// 编辑完回来
const router4 = useRouter();
const query2 = ()=>{
    fetch(`http://localhost:3000/articles/${router4.currentRoute.value.query.myid}?_embed=user`,{
        method:'get'
    }).then(response=>response.json()).then((data1)=>{
        b.value = data1
    })
}

// 点进去未编辑回来
const router11 = useRouter();
const  query3=()=>{
    fetch(`http://localhost:3000/articles/${router11.currentRoute.value.query.myid}?_embed=user`,{
        method:'get'
    }).then(response=>response.json()).then((data1)=>{
        b.value = data1
    })
} 

</script>